<template>
    <div class="component">
        <!--table-->
        <el-dialog
                :visible.sync="show"
                fullscreen
                :show-close="false"
                :center="true"
                :close-on-click-modal="false"
        >

            <el-card class="box-card" shadow="hover">
                <div slot="header" class="tabHeader" style="justify-content: flex-end">
                    <p class="tit" style="margin-right: auto;">批量添加枚举项</p>
                    <el-button type="primary" icon="el-icon-plus" @click="addRow"></el-button>
                </div>

                <el-table stripe :data="list" @row-dblclick="edit" :row-class-name="tableRowClassName">
                    <el-table-column label="枚举项编码" prop="enumItemCode" width="200">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" size="small" v-model="scope.row.enumItemCode"></el-input>
                            <span v-else>{{scope.row.enumItemCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="枚举项名称" prop="enumItemName" width="200">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" size="small" v-model="scope.row.enumItemName"></el-input>
                            <span v-else>{{scope.row.enumItemName}}</span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="是否系统" prop="isSystem" width="200">
                        <template slot-scope="scope">
                            <el-switch v-if="scope.row.edit" size="small" active-color="#13ce66" v-model="scope.row.isSystem"></el-switch>
                            <span v-else>{{scope.row.isSystem ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>-->
                    <el-table-column label="是否生效" prop="isEffective" width="200">
                        <template slot-scope="scope">
                            <el-switch v-if="scope.row.edit" size="small" active-color="#13ce66" v-model="scope.row.isEffective" style="width: 100px;"></el-switch>
                            <span v-else>{{scope.row.isEffective ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="是否系统" prop="isSystem" width="200">
                        <template slot-scope="scope">
                            <el-switch v-if="scope.row.edit" size="small" active-color="#13ce66" v-model="scope.row.isSystem" style="width: 100px;"></el-switch>
                            <span v-else>{{scope.row.isSystem ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>-->
                    <el-table-column label="生效开始时间" prop="effectiveFrom" width="350">
                        <template slot-scope="scope">
                            <el-date-picker v-if="scope.row.edit" v-model="scope.row.effectiveFrom" value-format="yyyy-MM-dd" type="date" placeholder="生效开始时间" :disabled="scope.row.isEffective==0"></el-date-picker>
                            <span v-else>{{scope.row.effectiveFrom}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="生效结束时间" prop="effectiveTo" width="350">
                        <template slot-scope="scope">
                            <el-date-picker v-if="scope.row.edit" v-model="scope.row.effectiveTo" value-format="yyyy-MM-dd" type="date" placeholder="生效开始时间" :disabled="scope.row.isEffective==0"></el-date-picker>
                            <span v-else>{{scope.row.effectiveTo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button slot="reference" size="mini" type="danger" @click="delRow(scope.$index)">删除</el-button>
                            <el-button slot="reference" size="mini" @click="complete(scope.row, scope.$index)" v-if="scope.row.edit">完成</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {request, url} from "../api/request";

    export default {
        name: "BatchAddEnumsItems",
        components: {

        },
        data() {
            return {
                list:[
                    {
                        enumItemCode:'',
                        enumItemName:'',
                        isEffective:true,
                        effectiveFrom:'',
                        effectiveTo:'',
                        edit:true,
                        // isSystem:false,
                    }
                ],
                df:{
                    enumItemCode:'',
                    enumItemName:'',
                    isEffective:true,
                    effectiveFrom:'',
                    effectiveTo:'',
                    edit:true,
                    // isSystem:false,
                }
            };
        },
        props: {
            show: {
                type: Boolean,
                default: false,
            },
            solutionId: {
                type: String,
                default: ''
            },
            enumDefineId: {
                type: String,
                default: ''
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            //给每一行数据加索引
            tableRowClassName ({row, rowIndex}) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            addRow(){
                this.list.map(v=>{
                   v.edit = false;
                });
                this.list.push({...this.df});
            },
            edit(row){
                this.list.map(v=>{
                    v.edit = false;
                });
                this.list[row.index].edit = true;
            },
            delRow(index){
                this.list.splice(index,1);
            },
            complete(row, index){
                if (!row.enumItemCode || !row.enumItemName || !row.effectiveFrom || !row.effectiveTo) {
                    this.$message({
                        message:'有未完成的必填项！',
                        type:'warning',
                    })
                }
                else{
                    this.list[index].edit = false;
                }
            },
            cancel(){
                this.$emit('showDialog', false);
            },
            ok(){
                let d = this.list.find(v=>{
                    if (v.edit) {
                        this.$message({
                            message:'有未完成的项！',
                            type:'warning',
                        })
                        return true;
                    }
                });


                if (!d) {
                    // console.log(this.$store.state);
                    this.list = this.replaceAllBoolean(this.list);
                    let list = JSON.parse(JSON.stringify(this.list));
                    list.forEach((v, i)=>{
                        delete v.edit;
                        delete v.index
                        // v.solutionId = this.$store.state.solution_global.solutionId;
                        v.enumDefineId = this.enumDefineId;
                    })

                    request(`${url.batchAddEnumItems}`,{
                        method:'POST',
                        headers:{'Content-Type':'application/json'},
                        // data:{
                        //     // solutionId:this.$store.state.solution_global.solutionId,
                        //     // enumDefineId:this.enumDefineId,
                        //     metaEnumItems:list,
                        // },
                        data:list,
                    },res=>{
                        this.$notify.success(res.message);
                        this.cancel();
                    },()=>{

                    })
                }
                else{
                    console.log(d);
                }

            },
        }
    };
</script>

<style scoped>
    .tabHeader{
        display: flex;
        align-items: center;
    }
    .tit{
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }
    .box-card{
        margin-bottom: 15px;
    }
</style>
